<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:utils="http://java.sun.com/jsf/composite/utils">
  
  
<h:head>
    <link href="resources/styles/main.css" rel="stylesheet" type="text/css"/>
    <h:outputScript library="primefaces" name="jquery/jquery.js"/>
	<script type="text/javascript" src="./resources/js/validator.js"/>
	<title>#{m.title_registration}</title>
</h:head>
  
  <h:body>
 <div> 
  <utils:menuComponent id="ccId"/>
  
    <div class="product-container" style="padding-top:180px;">
  
	  <h:form id="registration-form" onsubmit="return validateRegistration()">
	  
	 <div  style="margin-left:60px;"> 
	 
	  <div class="order-info-container">
		  <label for="name" class="cart-label">#{m.login}: <em style="color:#75A10D;">*</em></label>
		  <h:inputText value="#{userDetails.username}" class="reg-info username"/>
		  <span class="error username" style="display:none;color:green">#{m.blank_login}</span>
	  </div>
	  
	  <div class="order-info-container">
		  <label for="name" class="cart-label">#{m.password}: <em style="color:#75A10D;">*</em></label>
		  <h:inputSecret value="#{userDetails.password}" class="reg-info pwd"/>
		  <span class="error pwd" style="display:none;color:green">#{m.blank_pwd}</span>
	  </div>
	  
	  <div class="order-info-container">
		  <label for="name" class="cart-label">#{m.mail}: <em style="color:#75A10D;">*</em></label>
		  <h:inputText value="#{userDetails.mail}" class="reg-info mail"/>
		  <span class="error mail" style="display:none;color:green">#{m.uncorrect_mail}</span>
	  </div>
	  
	  <div class="order-info-container">
		  <label for="name" class="cart-label">#{m.city}: <em style="color:#75A10D;">*</em></label>
		  <h:inputText value="#{userDetails.city}" class="reg-info city"/>
		  <span class="error city" style="display:none;color:green">#{m.blank_city}</span>
	  </div>
	  
	  <div class="order-button-container">
		<h:commandButton action="#{registration.registerUser}" value="#{m.register_process}" class="button-order"/>
	  </div>
	  
	</div>	
	  <h:messages for="registration-form" class="search-error"/>
	
	  </h:form>
	  
	  	<div class="footer-container footer-shift">
            <utils:footer/>
        </div>
	  
	</div>  
	  

  
  </div>
  </h:body>
  
  </html>